/**
 * Created by dazq on 16/11/23.
 */
import React, { Component } from 'react';
import { View,StyleSheet,Text,Dimensions,PropTypes,Picker } from 'react-native';
import Chart from 'react-native-chart';




//取屏幕的宽度
const {height, width} = Dimensions.get('window');


export default class SimpleChart extends Component {
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            selected1: 'key1',
        };
      }
    _fetchData(){
        const data = [
            ['2016-11-22', 1],
            ['2016-11-23', 3],
            ['2016-11-24', 7],
            ['2016-11-25', 9],
            ['2016-11-25', 12],
        ];
        return data
    }
    static get defaultProps() {
        return {
            // stuff you want :)
            title:'daizq'
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.upViewStyle}>
                    <Chart
                        style={styles.chart}
                        data={this._fetchData()}
                        verticalGridStep={4}
                        type="line"
                        showDataPoint={true}
                        color={'#5FC3E5'}
                        gridLineWidth={2}
                        showXAxisLabels={true}
                        gridColor={'#DCDCDC'}
                        axisColor={'#969696'}
                        xAxisHeight={15}
                        xAxisTransform={()=>(['aaaa','bbbb'])}
                    />
                </View>
                <View style={styles.btViewStyle}>
                    <SimpleChart2 ></SimpleChart2>
                    <Picker
                        style={styles.picker}
                        selectedValue={this.state.selected1}
                        onValueChange={(value)=>(this.setState({selected1:value}))}>
                        <Picker.Item label="hello" value="key0" />
                        <Picker.Item label="world" value="key1" />
                    </Picker>
                    <Text > This is the second part.</Text>
                </View>
            </View>
        );
    }
}

 class SimpleChart2 extends Component {
    // 构造
      constructor(props) {
        super(props);
        // 初始状态
        this.state = {};
      }
     // 只有当被调用并传递了 tilte 时才会调用这个防范.
     componentWillReceiveProps(props) {
     }
     render(){
         return (
             <View><Text>{this.props.title}</Text></View>
         )
     }

 }

//设置 props 默认值
SimpleChart2.defaultProps = {
    title:'daicl'
}

const styles = StyleSheet.create({
    container: {
        flex:1,
        alignItems:'center',
        justifyContent: 'center',
        backgroundColor:'#F5F5F5'
    },
    picker: {
        width: 100,
    },
    upViewStyle:{
        flex:1,
        marginTop:62
    },
    flex_1:{
        flex:1
    },
    chart: {
        flex:1,
        width:width-60,
        height:height/2
    },
    btViewStyle:{
        flex:1,
        justifyContent: 'center',
    }
});
